<template>
  <div class="navigation">
    <div class="nav-head">
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchInput">
      </el-input>
      <el-button type="primary" class="nav-btn" @click="searchLocation(searchInput)">查询</el-button>
      <el-input v-model="startText" placeholder="请输入起始位置" @blur="searchLocationStart(startText)"></el-input>
      <el-input v-model="endText" placeholder="请输入目标位置" @blur="searchLocationEnd(endText)"></el-input>
      <el-button type="primary" class="nav-btn" id="navbtn" @click="defineRoute">路线规划</el-button>
    </div>
    <div id="container"></div>
  </div>
</template>
<style lang="less">
.nav-head {
  height: 60px;
  text-align: left;

  .el-input {
    width: 200px;
    margin-left: 40px;
  }

  .nav-btn {
    margin-left: 20px;
  }
}

.el-input__inner {
  width: 200px;
}

.navigation {
  height: 100%;

  #container {
    height: 83%;
    width: 96%;
    margin-left: 2%;
  }
}
</style>
<script>
export default {
  data() {
    return {
      searchInput: "",
      startText: "",
      endText: "",
      map: {},
      start: { a: 1 },
      driving: {},
    };
  },
  methods: {
    initalMap() {
      this.map = new BMapGL.Map("container");
      this.start = new BMapGL.Point(104.06540102143204, 30.555751851617792);
      this.map.centerAndZoom(this.start, 18);

      this.map.enableScrollWheelZoom(true);
      this.map.setTrafficOn();
      var scaleCtrl = new BMapGL.ScaleControl();
      this.map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl();
      this.map.addControl(zoomCtrl);
      var marker = new BMapGL.Marker(this.start);
      this.map.addOverlay(marker);
    },
    searchLocation(input) {
      let myGeo = new BMapGL.Geocoder();
      let mapGeo = this.map;
      let searchInputGeo = input;
      myGeo.getPoint(
        searchInputGeo,
        function (point) {
          if (point) {
            mapGeo.centerAndZoom(point, 16);
            mapGeo.addOverlay(
              new BMapGL.Marker(point, { title: searchInputGeo })
            );
          } else {
            alert("您选择的地址没有解析到结果！");
          }
        },
        "成都市"
      );
      this.searchInput = "";
    },
    searchLocationEnd(input) {
      let myGeo = new BMapGL.Geocoder();
      let searchInputGeo = input;
      console.log(searchInputGeo);
      myGeo.getPoint(
        searchInputGeo,
        function (point) {
          if (point) {
            sessionStorage.setItem("endLocation", JSON.stringify(point));
          } else {
            alert("您选择的地址没有解析到结果！");
          }
        },
        "成都市"
      );
    },
    searchLocationStart(input) {
      let myGeo = new BMapGL.Geocoder();
      let searchInputGeo = input;
      console.log(searchInputGeo);
      myGeo.getPoint(
        searchInputGeo,
        function (point) {
          if (point) {
            sessionStorage.setItem("startLocation", JSON.stringify(point));
          } else {
            alert("您选择的地址没有解析到结果！");
          }
        },
        "成都市"
      );
    },
    defineRoute() {
      if (this.driving.hasOwnProperty("QUERY_TYPE")) {
        this.map.clearOverlays();
      }
      let mapGeo = this.map;
      var driving = new BMapGL.DrivingRoute(mapGeo, {
        renderOptions: { map: mapGeo, autoViewport: true },
        onSearchComplete: function (results) {
          if (driving.getStatus() != BMAP_STATUS_SUCCESS) {
            return;
          }
        },
      });
      let getget = this.getDriveTime
      let addres = sessionStorage.getItem("setaddres");
      let addres1 = addres.slice(1, -1)
      console.log(addres);
      let myGeo = new BMapGL.Geocoder();
      if (addres != "none") {
        myGeo.getPoint(
          addres1,
          function (point) {
            if (point) {
              let start1 = new BMapGL.Point(
                104.06540102143204,
                30.555751851617792
              );
              getget(start1, point, '国信安', addres1);
              sessionStorage.setItem("setaddres", "none");
            } else {
              alert("您选择的地址没有解析到结果！");
            }
          },
          "成都市"
        );
      } else {
        if (sessionStorage.getItem("endLocation") != "") {
          console.log(456789);
          let start = sessionStorage.getItem("startLocation");
          let end = sessionStorage.getItem("endLocation");
          start = JSON.parse(start);
          end = JSON.parse(end);
          start = new BMapGL.Point(start.lng, start.lat);
          end = new BMapGL.Point(end.lng, end.lat);
          // mapGeo.centerAndZoom(start, 15);
          sessionStorage.setItem("startLocation", "");
          sessionStorage.setItem("endLocation", "");
          this.getDriveTime(start, end, this.startText, this.endText);
          this.startText = "";
          this.endText = "";
        }
      }
      this.driving = driving;
    },
    getDriveTime(start, end, startText, endText) {
      var map = this.map;
      map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
      var output = "从" + startText + "到" + endText + "驾车需要";
      var searchComplete = function (results) {
        if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
          return;
        }
        var plan = results.getPlan(0);
        output += plan.getDuration(true) + "\n"; //获取时间
        output += "总路程为：";
        output += plan.getDistance(true) + "\n"; //获取距离
      };
      var transit = new BMapGL.DrivingRoute(map, {
        renderOptions: { map: map },
        onSearchComplete: searchComplete,
        onPolylinesSet: function () {
          setTimeout(function () {
            alert(output);
          }, "1000");
        },
      });
      transit.search(start, end);
    },
  },
  mounted() {
    this.initalMap();
    this.defineRoute();
  },
};
</script>
